<template>
	<view class="other-component-container">
		<top-title-text @closeBtn="closeBtn" titleText="其他设置"></top-title-text>
		<scroll-view scroll-y="true" style="height: 1200rpx;width: 100%;">
		   <view class="other-setting-container">
			   <view class="other-theme-color-container">
				   <view class="other-theme-color-left-name">主题色</view>
				   <view class="other-theme-color-right-select-option-container">
					   <view :class="['other-theme-color-right-select-option-yellow', {'bgc-color' : colorSelect == 'yellow'}]" @click="changeColor('yellow')">淡黄色</view>
					   <view :class="['other-theme-color-right-select-option-white', {'bgc-color' : colorSelect == 'white'}]" @click="changeColor('white')">白色</view>
				   </view>
			   </view>
		   </view>
		</scroll-view>
	</view>
</template>

<script>
	import topTitleText from '@/components/top-title-text/top-title-text.vue';
	import {checkStrType2} from '@/util/regular/regular.js';
	import {setColor, getColor} from '@/util/auth.js';
    export default {
		components: {
			topTitleText, 
		},
		props: {
			
		},
        data() {
            return {
				colorSelect: '',
            }
        },
		methods: {
			/** 切换颜色选择
			 * @param {Object} color 颜色
			 */
			changeColor(color) {
				this.colorSelect = color;
				setColor(this.colorSelect);
			},
			/** 关闭本弹框
			 */
			closeBtn() {
				this.$emit("closeBtn");
			}
		},
		mounted() {
			if (!this.colorSelect) {
				this.colorSelect = getColor();
			}
		}
    }
</script>

<style lang="scss">
	
	.other-component-container {
		width: 100%;
		min-height: 1320rpx;
		padding: 20rpx;
		box-sizing: border-box;
		
		.other-setting-container {
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
			
			.other-theme-color-container {
				
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.other-theme-color-left-name {
					width: 150rpx;
					height: 100%;
					font-size: 30rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					
				}
				
				.other-theme-color-right-select-option-container {
					width: 270rpx;
					height: 100%;
					border-radius: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: $themeBgcLightGreyColor;
					
					.other-theme-color-right-select-option-yellow {
						width: 50%;
						height: 100%;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.other-theme-color-right-select-option-white {
						width: 50%;
						height: 100%;
						border-radius: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					
					.bgc-color {
						background-color: $themeYellowColor;
					}
				}
			}
		}
	}
	
</style>
